import React from 'react';
import styles from './index.module.less';
import classnames from 'classnames';
import { useHistory } from 'react-router-dom';

interface Props {
  selectedNav: NavType;
  hasAddAuthArr?: string[]
}

export enum NavType {
  CREATE = 'CREATE',
  LOG = 'LOG',
  MATTER = 'MATTER'
}

const OfficialDocFooter: React.FC<Props> = (props) => {
  const history = useHistory();

  const setActiveName = (type: NavType): string => {
    return props.selectedNav === type ? styles['active'] : '';
  };

  const handleActiveNavChange = (navItem: string): void => {
    history.replace(`/official-doc/${navItem}`);
  };

  return (
    <ul className={styles['nav']}>
      {
        props.hasAddAuthArr?.map((item: string) => {
          if (item === 'official-add') {
            return (
              <li className={classnames(styles['nav-item'], setActiveName(NavType.CREATE))} onClick={() => handleActiveNavChange('1')}>
                <i className={classnames('iconfont icon', styles['icon'])}>&#xe6dd;</i>
                <span className={styles['icon-text']}>新建</span>
              </li>)
          } else if (item === 'official-record') {
            return (
              <div className={classnames(styles['nav-item'], setActiveName(NavType.LOG))} onClick={() => handleActiveNavChange('2')}>
                <i className={classnames('iconfont icon', styles['icon'])}>&#xe6de;</i>
                <span className={styles['icon-text']}>记录</span>
              </div>
            )
          } else if (item === 'official-item') {
            return (
              <li className={classnames(styles['nav-item'], setActiveName(NavType.MATTER))} onClick={() => handleActiveNavChange('3')}>
                <i className={classnames('iconfont icon', styles['icon'])}>&#xe6dc;</i>
                <span className={styles['icon-text']}>公文事项</span>
              </li>
            )
          }
        })
      }
    </ul>
  );
};

export default OfficialDocFooter;